<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload=function () {
        //点击按钮btn01以后修改box1的大小
                 var box1=document.getElementById("box1");
                 var btn01=document.getElementById("btn01");
                 btn01.onclick=function () {
                // alert("hello");//测试一下 响应函数是否能用
                //修改box1的宽度
                box1.style.width="300px";
                box1.style.height="350px";
                //如果CSS样式中含有- 比如background-color 这种名称在JS中是不合法的，需要将此命名改成驼峰命名法
                //去掉-然后将-后的字母大写 即backgroundColor
                box1.style.backgroundColor="#ccc";
            };
        //点击按钮btn02以后读取box1的值
            var btn02=document.getElementById("btn02");
            btn02.onclick=function () {
            alert(box1.style.width);
             }

        }
    </script>
</head>
<body>
<script>
    /*1.通过js修改元素的样式 修改box1的样式
    *   语法:元素.style.样式名=样式值
    *    1.1.如果CSS样式中含有- 比如background-color 这种名称在JS中是不合法的，需要将此命名改成驼峰命名法
    *       去掉-然后将-后的字母大写 即backgroundColor
    *    1.2.我们通过style属性设置的样式都是内联样式，优先级比较高，所以通过js修改的样式会立即显示，
    *        但是如果在样式中有!import 则此样式具有最高优先级，即使通过JS也不能覆盖该样式，此时js修改的样式失效
    *       所以进来不要给样式添加！important
    *2.通过j读取元素的样式 读取box1的样式
    *   语法:元素.style.样式名
    *   通过style属性设置和读取的都是内联样式 无法读取样式表中的额样式
    * */
</script>
<button id="btn01">点我一下</button>
<button id="btn02">点我</button>
<br /><br />
<div id="box1"></div>
</body>
</html>